<template>
	<div>
		<el-form>
			<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
			  	<tbody>
			  		<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('agent.CompanyInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('agent.Name')}}*</td>
				  		<td><input v-model="agentData.name" id="name" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.Type')}}</td>
				  		<td><input v-model="agentData.idType" id='idType' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.Address')}}*</td>
				  		<td><input v-model="agentData.address" id='address' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('agent.MailAddr')}}</td>
				  		<td><input v-model="agentData.mailingAddress" id='mailingAddress' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mer.BRNo')}}*</td>
				  		<td><input v-model="agentData.registrationNumber" id='registrationNumber' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.Contact')}}*</td>
				  		<td><input v-model="agentData.contacts" id='contacts' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mer.Email')}}</td>
				  		<td><input v-model="agentData.email" id='email' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.PhoneNo')}}*</td>
				  		<td><input v-model="agentData.phone" id='phone' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.MobileNo')}}*</td>
				  		<td><input v-model="agentData.telephone" id='telephone' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mec.SettlementInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('agent.Method')}}*</td>
				  		<td><input v-model="agentData.clearingMode" id='clearingMode' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.Bank')}}*</td>
				  		<td><input v-model="agentData.bankname" id='bankname' type="text" :disabled="showDetails"/></td>
              <td>{{$t('mer.BankCode1')}}</td>
				  		<td><input type="text" v-model="agentData.bankCode" :disabled="showDetails"/></td>
				  		
				  	</tr>
				  	<tr>
              <td>{{$t('mer.AccountName')}}*</td>
				  		<td><input v-model="agentData.drawname" id='drawname' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mer.AccountNo')}}*</td>
				  		<td><input v-model="agentData.bankaccount" id='bankaccount' type="text" :disabled="showDetails"/></td>
				  		<td>SWIFT</td>
				  		<td><input v-model="agentData.SWIFTcode" id='SWIFTcode' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	
				  	<tr><td colspan="6" style="height: 22px;"></td></tr>
				  	
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('agent.CommissionInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>POS{{currency}}*</td>
				  		<td><input v-model="agentData.posMachine" id='posMachine' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.Scanner')+currency}}*</td>
				  		<td><input v-model="agentData.scanner" id='scanner' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.SubscriptionFee')+currency}}*</td>
				  		<td><input v-model="agentData.franchiseFee" id='franchiseFee' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('agent.OfflineBase')}}*</td>
				  		<td><input v-model="agentData.lineBaseRate" id='lineBaseRate' type="number" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.OnlineBase')}}*</td>
				  		<td><input v-model="agentData.onLineBaseRate" id='onLineBaseRate' type="number" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.OfflineComm')}}*</td>
				  		<td><input v-model="agentData.lineBrokerage" id='lineBrokerage' type="number" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('agent.OnlineComm')}}*</td>
				  		<td><input v-model="agentData.onLineBrokerage" id='onLineBrokerage' type="number" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.EndDate')}}</td>
				  		<td><input v-model="agentData.shutDownDate" id='endDate' type="text" :disabled="showDetails"/></td>
				  		<!--<td><el-date-picker v-model="agentData.shutDownDate" :editable=false type="date" :disabled="showDetails"></el-date-picker></td>-->
				  		<td>{{$t('agent.UpperLevelAgent')}}*</td>
				  		<td><input v-model="agentData.parentName" id='parentName' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('agent.UpperLevelID')}}*</td>
				  		<td><input v-model="agentData.parentId" id='parentId' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('salesman.Salesman')}}</td>
				  		<td><input v-model="agentData.salesmanName" id='salesmanName' type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('agent.BDStaffNo')}}</td>
				  		<td><input v-model="agentData.salesmanNumber" id='salesmanId' type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('agent.commissionRatio')}}</td>
				  		<td><input v-model="agentData.proportion" id='proportion' type="text" :disabled="showDetails"/></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
			  	</tbody>
			</table>
			<div class="btn-box">
			    <el-button class="blue-btn small-btn" @click="yes(0)">{{$t('cash.reject')}}</el-button>
			    <el-button class="blue-btn small-btn" @click="yes(2)">{{$t('button.Approve')}}</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import { agentDetails, updateStateAgent } from "api/merchant/agent/index";
export default {
  name: "agentAudit",
  props: ["distributorId"],
  data() {
    return {
      showDetails: true,
      agentData: {
        name: undefined,
        idType: undefined,
        address: undefined,
        mailingAddress: undefined,
        registrationNumber: undefined,
        contacts: undefined,
        email: undefined,
        phone: undefined,
        telephone: undefined,
        parentName: undefined,
        parentId: undefined,
        clearingMode: undefined,
        bankname: undefined,
        bankaccount: undefined,
        drawname: undefined,
        SWIFTcode: undefined,
        posMachine: undefined,
        scanner: undefined,
        franchiseFee: undefined,
        lineBaseRate: undefined,
        onLineBrokerage: undefined,
        lineBrokerage: undefined,
        onLineBrokerage: undefined,
        endDate: undefined,
        salesmanName: undefined,
        salesmanNumber: undefined,
        proportion: undefined,
        password: undefined,
        debId: undefined
      },
      agentOldData: {},
      agentNewData: {},
      agentOldArr: [],
      agentNewArr: [],
      num: 0,
      checktype: "",
      companyId: localStorage.getItem("companyId"),
      currency: localStorage.getItem("companyId") === "2" ? "(A$)" : "(HK$)"
    };
  },
  created() {
    this.agentAuditDetails(this.distributorId);
  },
  updated() {
    if (this.checktype === "修改信息") {
      this.agentOldArr = Object.getOwnPropertyNames(this.agentOldData);
      this.agentNewArr = Object.getOwnPropertyNames(this.agentNewData);
      for (let i = 0; i < this.agentOldArr.length; i++) {
        const propName = this.agentOldArr[i];
		const diffData = [];
		// console.log('老数据名称'+this.agentOldData[propName]+'=============='+'新数据名称'+this.agentNewData[propName]);
        if (this.agentOldData[propName] !== this.agentNewData[propName]) {
          this.num++;
          diffData[this.num] = document.getElementById(propName);
		  diffData[this.num].style.color = "red";
        }
      }
    }else{
		return false;
	}
  },
  methods: {
    //根据父组件传递的id查询出该代理商详情
    agentAuditDetails(id) {
      agentDetails(id).then(res => {
        this.agentData = res.value;
        if (res.value.viceDistributor) {
          this.agentOldData = res.value.viceDistributor;
          this.agentNewData = res.value;
          this.checktype = res.value.checkType;
          delete this.agentNewData.viceDistributor;
        }
        if (this.agentData.clearingMode === "0") {
          this.agentData.clearingMode = this.$t("cash.check");
        }
        if (this.agentData.clearingMode === "1") {
          this.agentData.clearingMode = this.$t("cash.onlineBanking");
        }
      });
    },
    //审核该代理商
    yes(value) {
      let msg =
        this.agentData.checkType === "修改信息"
          ? this.$t("hint.ApproveChangeOfInformation")
          : this.$t("hint.ApproveRegistration");
      let rejectMsg =
        this.agentData.checkType === "修改信息"
          ? this.$t("hint.SureToRejectThisAgentInfoChange")
          : this.$t("hint.SureToRejectTheAdditionOfThisAgent");
      let modifyEnabled = {
        id: this.agentData.id,
        userId: this.agentData.userId,
        state: value
      };
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: value === 0 ? rejectMsg : msg,
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        updateStateAgent(modifyEnabled)
          .then(res => {
            // console.log(res);
            if (res.code === 0) {
              this.$notify({
                title: this.$t("hint.Success"),
                message: this.$t("hint.OperationSuccess"),
                type: "success",
                duration: 2000
              });
              this.$emit("auditAgentChange");
            } else {
              this.$notify({
                title: this.$t("hint.Fail"),
                message: this.$t("hint.OperationFail"),
                type: "error",
                duration: 2000
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    }
  }
};
</script>

<style>

</style>